import React, { useState, useEffect } from 'react';
import { Sbtn, Time } from 'base/ctl/base';
import { Title, PVal } from 'base/ctl/title';
import { set_st } from 'base/api';
import { get_val, load_setting } from './cmd';
import { obj_str, uAction } from 'sui';
import { s_state } from 'db/state';
import { send_step } from 'base/api';

const StdView = ({ umd, high, wsn, hreturn }) => {
    const [main, setMain] = useState();

    useEffect(() => {
        send_step(null, { fwidth: "", fdia: "" });
        s_state("");

        load_setting(v => {
            umd.mset({
                out_w_std: obj_str(v, "out_w_std"),
                out_dia_std: obj_str(v, "out_dia_std"),
            });

            setMain(v);
        });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, []);

    const hstart = () => {
        send_step(null, { fwidth: "", fdia: "" });

        uAction(null, { cmd: "std" },
            r => {
                set_st(umd, "std");
                umd.set("err", "");
            },
            e => {
                umd.set("err", "开始标定错误");
            });
    };

    const dis = () => {
        const st = umd.get("state");
        return st === "std";
    };

    return (
        <div className="flex flex-col ml-2 mr-1">
            <div className="inline-flex mt-2 justify-between items-center">
                <div className="inline-flex items-center">
                    <Title value={wsn} sub="宽度与外圆 >> 标定" width="w-px-300"/>
                    <Title value={obj_str(main, "tech")} sub="型号" width="w-56"/>
                </div>
                <div className="inline-flex mr-4">
                    <Sbtn cl="green" label="开始标定" hcmd={hstart} w="w-56" disabled={dis()}/>
                    <Sbtn cl="blue" label="返回" hcmd={hreturn} disabled={dis()}/>
                </div>
            </div>
            <div className="flex flex-row items-start mb-2 mt-4" style={{ height: `${high}px`, width: "100%" }}>
                <div style={{ height: `${high}px` }} className="mr-2 overflow-y-auto w-1/2 text-white text-2xl border">
                    <div className="bg-indigo-700 flex justify-between py-2 items-center">
                        <div className={ "inline-flex px-4 items-center"}>宽度</div>
                        <div className="inline-flex px-4 items-center">校零值 ( 微米 )<span className="ml-4">{get_val(main, "out_w_zero")}</span></div>
                    </div>
                    <PVal label="标定值 ( 微米 )" value={umd.get("out_w_std")} width="w-56" className="ml-8 mt-8"/>
                </div>
                <div style={{ height: `${high}px` }} className="mx-2 overflow-y-auto w-1/2 text-white text-2xl border">
                    <div className="bg-teal-700 flex justify-between py-2 items-center">
                        <div className={ "inline-flex px-4 items-center"}>外圆</div>
                        <div className="inline-flex px-4 items-center">校零值 ( 微米 )<span className="ml-4">{get_val(main, "out_dia_zero")}</span></div>
                    </div>
                    <PVal label="标定值 ( 微米 )" value={umd.get("out_dia_std")} width="w-56" className="ml-8 mt-8"/>
                </div>
            </div>
            <div className="inline-flex items-center justify-between">
                <div className="w-full mr-2 mt-2 border border-white rounded bg-white justify-between">
                    <div className="ml-2 font-bold text-xl text-red-600 h-12">{umd.get("err")}</div>
                </div>
                <div className="flex justify-center ml-2 w-32">
                    <Time up={true}/>
                </div>
            </div>
        </div>
    );
};

export {StdView};
